<template>
    <div class="container">
         <el-tabs v-model="activeName1" type="border-card" style="margin-top:20px;" @tab-click="handleClick1">
            <el-tab-pane v-if='switchHeadTab == "生产系统"' label="国标" name="1" ></el-tab-pane>
            <el-tab-pane v-if='switchHeadTab == "生产系统"' label="省标" name="2" ></el-tab-pane>
            <el-tab-pane v-if='switchHeadTab == "中药饮片"' label="中药饮片(半成品)" name="中药饮片(半成品)" >
                 <el-row>
                     <el-col :span="7">
                         <el-input style="border-radius: 0 5px 5px 0; width:300px;" placeholder="请输入关键词" v-model.trim="searchNamebcp">
                             <i slot="prefix" class="el-input__icon el-icon-search"></i>
                             <el-button slot="append" @click="handleSearchbcp">搜索</el-button>
                         </el-input>
                     </el-col>
                     <el-button style="float:right; margin-right: 10px" @click="download">模板下载</el-button>
                     <el-upload
                         class="upload-demo"
                         ref="upload"
                         :action="action"
                         :on-change="uploadonchange"
                         accept=".xlsx,.xls"
                         :show-file-list='false'
                         :auto-upload="false">
                         <el-button slot="trigger" size="small">导入模板</el-button>
                     </el-upload>
                     <el-button type="primary" @click='gogongyi("中药饮片(半成品)")' v-if="added" style="float:right; margin-right: 10px">添加工艺</el-button>
                 </el-row>

                 <el-table
                     :data="tableData"
                     border
                     ref="multipleTable"
                     header-cell-class-name="table-header"
                     style="margin-top:20px;"
                 >
                     <el-table-column prop="name" sortable label="工艺名称"></el-table-column>
                     <el-table-column prop="breedName" sortable label="品名"></el-table-column>
                     <el-table-column prop="standard" sortable label="标准分类"></el-table-column>
                     <el-table-column prop="createTime" sortable label="添加时间"></el-table-column>
                     <el-table-column prop="standards" sortable label="执行标准">
                         <template slot-scope="scope">
                             <el-button
                                 type="text"
                                 @click="handlecheck(scope.$index, scope.row)"
                             >{{scope.row.standards}}</el-button>

                         </template>
                     </el-table-column>
                     <el-table-column label="操作" width="150" align="center">
                         <template slot-scope="scope">
                             <el-button
                                 type="text"
                                 v-if="edit"
                                 @click="handleEdit(scope.$index, scope.row)"
                             >编辑</el-button>
                             <el-button
                                 type="text"
                                 v-if="del"
                                 @click="handleDelete(scope.$index, scope.row)"
                             >删除</el-button>
                         </template>
                     </el-table-column>
                 </el-table>
                 <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize" :current-page.sync="currentPagebcp"  @current-change="handleCurrentChangebcp" :total="totalbcp" style="margin-top:20px"></el-pagination>
             </el-tab-pane>
            <el-tabs v-if='switchHeadTab == "生产系统"' v-model="activeName" type="border-card" style="margin-top:20px;" @tab-click="handleClick">
                <el-tab-pane label="提取饮片" name="提取饮片" >
                    <el-row>
                        <el-col :span="7">
                            <el-input style="border-radius: 0 5px 5px 0; width:300px;" placeholder="请输入关键词" v-model.trim="searchName1">
                                <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                <el-button slot="append" @click="handleSearch1">搜索</el-button>
                            </el-input>
                        </el-col>
                        <el-button style="float:right; margin-right: 10px" @click="download">模板下载</el-button>
                        <el-upload
                            class="upload-demo"
                            ref="upload"
                            :action="action"
                            :on-change="uploadonchange"
                            accept=".xlsx,.xls"
                            :show-file-list='false'
                            :auto-upload="false">
                            <el-button slot="trigger" size="small">导入模板</el-button>
                        </el-upload>
                        <el-button type="primary" @click='gogongyi' v-if="added" style="float:right; margin-right: 10px">添加工艺</el-button>
                    </el-row>

                    <el-table
                        :data="tableData"
                        border
                        ref="multipleTable"
                        header-cell-class-name="table-header"
                        style="margin-top:20px;"
                    >
                        <el-table-column prop="name" sortable label="工艺名称"></el-table-column>
                        <el-table-column prop="breedName" sortable label="品名"></el-table-column>
                        <el-table-column prop="standard" sortable label="标准分类"></el-table-column>
                        <el-table-column prop="createTime" sortable label="添加时间"></el-table-column>
                        <el-table-column prop="standards" sortable label="执行标准">
                            <template slot-scope="scope">
                                <el-button
                                    type="text"
                                    @click="handlecheck(scope.$index, scope.row)"
                                >{{scope.row.standards}}</el-button>

                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="150" align="center">
                            <template slot-scope="scope">
                                <el-button
                                    type="text"
                                    v-if="edit"
                                    @click="handleEdit(scope.$index, scope.row)"
                                >编辑</el-button>
                                <el-button
                                    type="text"
                                    v-if="del"
                                    @click="handleDelete(scope.$index, scope.row)"
                                >删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize" :current-page.sync="currentPage"  @current-change="handleCurrentChange" :total="total" style="margin-top:20px"></el-pagination>
                </el-tab-pane>
                <el-tab-pane label="配方颗粒(浸膏粉)" name="配方颗粒(浸膏粉)">
                    <el-row>
                        <el-col :span="7">
                            <el-input style="width:300px;" placeholder="请输入关键词" v-model.trim="searchName3">
                                <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                <el-button slot="append" @click="handleSearch3">搜索</el-button>
                            </el-input>
                        </el-col>
                        <el-button style="float:right; margin-right: 10px" @click="download">模板下载</el-button>
                        <el-upload
                            class="upload-demo"
                            ref="upload"
                            :action="action"
                            :on-change="uploadonchange"
                            accept=".xlsx,.xls"
                            :show-file-list='false'
                            :auto-upload="false">
                            <el-button slot="trigger" size="small">导入模板</el-button>
                        </el-upload>
                        <el-button type="primary" @click='gogongyi' v-if="added" style="float:right; margin-right: 10px">添加工艺</el-button>
                    </el-row>
                    <el-table
                        :data="tableData3"
                        border
                        ref="multipleTable"
                        header-cell-class-name="table-header"
                        style="margin-top:20px;"
                    >
                        <el-table-column prop="name" sortable label="工艺名称"></el-table-column>
                         <el-table-column prop="breedName" sortable label="品名"></el-table-column>
                        <el-table-column prop="standard" sortable label="标准分类"></el-table-column>
                        <!-- <el-table-column prop="productName" sortable label="加工产品"></el-table-column> -->
                        <el-table-column prop="createTime" sortable label="添加时间"></el-table-column>
                        <el-table-column prop="standards" sortable label="执行标准">
                            <template slot-scope="scope">
                                <el-button
                                    type="text"
                                    @click="handlecheck(scope.$index, scope.row)"
                                >{{scope.row.standards}}</el-button>

                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="150" align="center">
                            <template slot-scope="scope">
                                <el-button
                                    type="text"
                                    v-if="edit"
                                    @click="handleEdit(scope.$index, scope.row)"
                                >编辑</el-button>
                                <el-button
                                    type="text"
                                    v-if="del"
                                    @click="handleDelete1(scope.$index, scope.row)"
                                >删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize" :current-page.sync="currentPage3"  @current-change="handleCurrentChange3" :total="total3" style="margin-top:20px"></el-pagination>
                </el-tab-pane>
                <el-tab-pane label="配方颗粒(颗粒)" name="配方颗粒(颗粒)">
                    <el-row>
                        <el-col :span="7">
                            <el-input style="width:300px;" placeholder="请输入关键词" v-model.trim="searchName1">
                                <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                <el-button slot="append" @click="handleSearch2">搜索</el-button>
                            </el-input>
                        </el-col>
                        <el-button style="float:right; margin-right: 10px" @click="download">模板下载</el-button>
                        <el-upload
                            class="upload-demo"
                            ref="upload"
                            :action="action"
                            :on-change="uploadonchange"
                            accept=".xlsx,.xls"
                            :show-file-list='false'
                            :auto-upload="false">
                            <el-button slot="trigger" size="small">导入模板</el-button>
                        </el-upload>
                        <el-button type="primary" @click='gogongyi' v-if="added" style="float:right; margin-right: 10px">添加工艺</el-button>
                    </el-row>
                    <el-table
                        :data="tableData1"
                        border
                        ref="multipleTable"
                        header-cell-class-name="table-header"
                        style="margin-top:20px;"
                    >
                        <el-table-column prop="name" sortable label="工艺名称"></el-table-column>
                         <el-table-column prop="breedName" sortable label="品名"></el-table-column>
                        <el-table-column prop="standard" sortable label="标准分类"></el-table-column>
                        <!-- <el-table-column prop="productName" sortable label="加工产品"></el-table-column> -->
                        <el-table-column prop="createTime" sortable label="添加时间"></el-table-column>
                        <el-table-column prop="standards" sortable label="执行标准">
                            <template slot-scope="scope">
                                <el-button
                                    type="text"
                                    @click="handlecheck(scope.$index, scope.row)"
                                >{{scope.row.standards}}</el-button>

                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="150" align="center">
                            <template slot-scope="scope">
                                <el-button
                                    type="text"
                                    v-if="edit"
                                    @click="handleEdit(scope.$index, scope.row)"
                                >编辑</el-button>
                                <el-button
                                    type="text"
                                    v-if="del"
                                    @click="handleDelete1(scope.$index, scope.row)"
                                >删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize" :current-page.sync="currentPage1"  @current-change="handleCurrentChange1" :total="total1" style="margin-top:20px"></el-pagination>
                </el-tab-pane>
            </el-tabs>
        </el-tabs>
        <big-img v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"></big-img>
    </div>
</template>

<script>
import BigImg from '../../../common/BigImg.vue';
    import {process_daoru,process_list,process_delete} from '@/request/api'
import axios from "axios";
import { mapState } from 'vuex';
    export default {
        components: { 'big-img':BigImg},
        data() {
            return {
                activeName1:'1',
                imgSrc:'',
                showImg:false,
                total1:0,
                total:0,
				 total3:0,
                totalbcp:0,
                currentPage:1,
                currentPage1:1,
				currentPage3:1,
                currentPagebcp:1,
                pagesize:10,
                searchName1: '',
                searchName2: '',
				searchName3: '',
                searchNamebcp:'',
                activeName: '提取饮片',
                tableData: [],
                tableData1: [],
				tableData3: [],
                boxCode:'',
                boxCode1:'',
                action:'',
                added:true,
                edit:true,
                del:true
            };
        },
        computed:{
            ...mapState(['switchHeadTab'])
        },
         created(){
            var data = JSON.stringify(this.$store.state.gygx)
            var a = "新增"
            var b = "编辑"
            var d = "删除"
            if(data.indexOf(a) != -1){
                this.added = true
            }else{
                this.added = false
            }
            if(data.indexOf(b) != -1){
                this.edit = true
            }else{
                this.edit = false
            }
            if(data.indexOf(d) != -1){
                this.del = true
            }else{
                this.del = false
            }
        },
        mounted(){
            if(this.switchHeadTab == '生产系统'){
                if(sessionStorage.getItem('processTab')){
                    this.activeName = sessionStorage.getItem('processTab')
                }
                if(sessionStorage.getItem('processStandardTab')){
                    this.activeName1 = sessionStorage.getItem('processStandardTab')
                }
                if(sessionStorage.getItem('processStandardTab') == '中药饮片(半成品)'){
                    this.activeName = '提取饮片'
                    this.activeName1 = '1'
                }
                this.init()
                this.init1()
                this.init2()
            }else{
                this.activeName1 = '中药饮片(半成品)'
                this.initbcp()
            }
        },
        methods: {
            handleClick1(){
                if(this.switchHeadTab == '中药饮片'){
                    this.initbcp()
                }else{
                    this.init()
                    this.init1()
                    this.init2()
                }
            },
            gogongyi(flag){
                this.$router.push({
                    path:'/process/added',
                    query:{
                        name:flag == '中药饮片(半成品)'?flag:this.activeName,
                        standard:this.activeName1
                    }
                })
            },
            download(){
                //  window.location.href = "http://" + window.location.host + "/muban.xlsx";
                // window.location.href = "http://" + window.location.host + "/工艺模版导入.xls";
              axios({
                method: 'GET',
                url: '/technology/downTemplate',
                responseType: 'blob'
              }).then(res=>{
                // console.log(res)
                this.downloadFile(res, '数据.xls')
              }).catch(err=>{
                // console.log(err)
              })


              // /technology/downTemplate
            },

          downloadFile(res, fileName) {
            let blob = new Blob([res.data]);
            if (!fileName) {
              fileName = res.headers['content-disposition'].split('filename=').pop();
            }
            if ('msSaveOrOpenBlob' in navigator) {
              window.navigator.msSaveOrOpenBlob(blob, fileName);
            } else {
              const elink = document.createElement('a');
              elink.download = fileName;
              elink.style.display = 'none';
              elink.href = URL.createObjectURL(blob);
              document.body.appendChild(elink);
              elink.click();
              URL.revokeObjectURL(elink.href);
              document.body.removeChild(elink);
            }
          },
            handlecheck(index,row){
                this.showImg = true;
　　　　　　    // 获取当前图片地址
　　　　　　    this.imgSrc = this.$store.state.imageUrls + row.standards;

            },
            viewImg(){
                this.showImg = false;
            },
            init(){
                process_list({
                    standard:this.activeName1,
                    page:this.currentPage,
                    type:'提取饮片',
                    query:this.searchName1
                }).then((res)=>{
                    this.total = res.total
                    this.tableData = res.rows
                    for (let i = 0; i < this.tableData.length; i++) {
                        if(this.tableData[i].standard == 1){
                            this.tableData[i].standard = "国标"
                        }else if(this.tableData[i].standard == 2){
                            this.tableData[i].standard = "省标"
                        }

                    }
                })
            },

            initbcp(){
                process_list({
                    page:this.currentPagebcp,
                    type:'中药饮片(半成品)',
                    query:this.searchNamebcp
                }).then((res)=>{
                    this.totalbcp = res.total
                    this.tableData = res.rows
                    for (let i = 0; i < this.tableData.length; i++) {
                        if(this.tableData[i].standard == 1){
                            this.tableData[i].standard = "国标"
                        }else if(this.tableData[i].standard == 2){
                            this.tableData[i].standard = "省标"
                        }

                    }
                })
            },

            init1(){
                process_list({
                    standard:this.activeName1,
                    page:this.currentPage1,
                    type:'配方颗粒(颗粒)',
                    query:this.searchName1
                }).then((res)=>{
                    this.total1 = res.total
                    this.tableData1 = res.rows
                     for (let i = 0; i < this.tableData1.length; i++) {
                        if(this.tableData1[i].standard == 1){
                            this.tableData1[i].standard = "国标"
                        }else if(this.tableData1[i].standard == 2){
                            this.tableData1[i].standard = "省标"
                        }

                    }
                })
            },

			init2(){
				process_list({
                    standard:this.activeName1,
				    page:this.currentPage3,
				    type:'配方颗粒(浸膏粉)',
				    query:this.searchName3
				}).then((res)=>{
				    this.total3 = res.total
				    this.tableData3 = res.rows
                     for (let i = 0; i < this.tableData3.length; i++) {
                        if(this.tableData3[i].standard == 1){
                            this.tableData3[i].standard = "国标"
                        }else if(this.tableData3[i].standard == 2){
                            this.tableData3[i].standard = "省标"
                        }

                    }
				})
			},
            handleCurrentChange(val){
                this.currentPage = val
                this.init()
            },
            handleCurrentChangebcp(val){
                this.currentPagebcp = val
                this.initbcp()
            },
            handleCurrentChange1(val){
                this.currentPage1 = val
                this.init1()
            },
			handleCurrentChange3(val){
			    this.currentPage4 = val
			    this.init2()
			},
            handleClick(){
                // console.log(this.activeName)
            },
            // 调用接口
            getcase(){

            },
            handleEdit(index,row){
                this.$router.push({
                    path:'/process/added',
                    query:{
                        id:row.id,
                        name:this.activeName,
                        standard:this.activeName1
                    }
                })
            },
            //删除
            handleDelete(index,row){
                this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    process_delete(row.id).then((res)=>{
                        // this.tableData.splice(row,1)

                        this.$notify({
                            title: '操作成功',
                            message: '删除成功',
                            type: 'success'
                        });
                        this.init()
                    })
                });
            },
            handleDelete1(index,row){
                this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    process_delete(row.id).then((res)=>{
                        // this.tableData.splice(row,1)
                        this.init1()
                        this.$notify({
                            title: '操作成功',
                            message: '删除成功',
                            type: 'success'
                        });
                    })
                });
            },
            uploadonchange(file) {
                let formData = new FormData();
                formData.append('file', file.raw);
                let config = {
                    headers:{'Content-Type':'multipart/form-data'}
                };
                process_daoru(formData).then((res) =>{
                    if (res.code == 200) {
                        this.$notify({
                            title: '操作成功',
                            message: '导入成功',
                            type: 'success'
                        });
                        this.init()
                    } else{
                        this.$notify.error({
                            title: '操作失败',
                            message: '导入失败',
                            type: 'error'
                        });
                    }
                })
            },
            handleSearch1() {
                this.currentPage = 1
                this.init()
            },

            handleSearchbcp() {
                this.currentPagebcp = 1
                this.initbcp()
            },
            handleSearch2() {
                this.currentPage1 = 1
                this.init1()
            },
			handleSearch3() {
			    this.currentPage3 = 1
			    this.init2()
			},
        },

    }
</script>

<style>


    .upload-demo .el-upload--text{
    border: none;
    width: auto;
    height: auto;
    border-radius: 0;
    float: right;
    margin-right: 10px
}
.scopClass .el-table{ margin-top: 20px;}
.scopClass .el-pagination{
    text-align: center;
}
/* .el-row{ margin-bottom: 20px;} */
.el-pagination{
    text-align: center;
}
.el-col{
    margin-bottom:0;
}
</style>
